<template>
  <div class="content travelGuide">
    <THeader :active="this.$route.path"></THeader>

    <el-row style="padding: 40px 0;">
      <el-col :span="18" :offset="3">
        <el-card>
          <el-row style="padding: 20px 0;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="breadData[0].route">{{breadData[0].label}}</el-breadcrumb-item>
              <el-breadcrumb-item :to="breadData[1].route">{{breadData[1].label}}</el-breadcrumb-item>
              <el-breadcrumb-item>{{breadData[2].label}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-row>
          <el-row>
            <h4 style="font-size: 28px;">{{singData.title}}</h4>
            <div>
              <span>{{singData.author_name}}</span>
              <span>发表于 {{lastTime}}小时前</span>
              <span>赞（{{singData.praise}}）</span>
              <span>评论（{{comment.length}}）</span>
            </div>
            <Divider></Divider>
          </el-row>
          <el-row>
            <p >{{singData.content}}</p>
            <Divider></Divider>
            <div style="text-align: right;">
              <span>分类：{{showTag}}</span>
              <span>字数：{{textLen}} </span>
            </div>
            <div style="text-align: center">
              <el-button icon="el-icon-star-on" type="primary">点赞</el-button>
            </div>
          </el-row>

        </el-card>
      </el-col>

    </el-row>
    <el-row>
      <el-col :span="18" :offset="3">
        <el-card>
          <div style="line-height: 32px;">评论（{{comment.length}}）</div>
          <el-input type="textarea"></el-input>
          <div style="text-align: right;padding: 5px 0;">
            <span style="line-height: 32px;color: #999;">Ctrl+Enter</span>
            <el-button type="success" @click="sendcomment">发送评论</el-button>
          </div>

          <div>
            <el-row v-for="(item,index) in comment" :key="index">
              <el-col :span="3">
                <div style="height: 80px; width: 80px;border: solid 1px #ccc;" />
              </el-col>
              <el-col :span="20">
                <div>我们的心事儿</div>
                <div style="color: #999;">4楼 2017/11/30 18:19</div>
                <div>good</div>
                <div style="padding: 10px 0;" v-if="false">
                  <el-input type="textarea"></el-input>
                  <div style="text-align: right;padding: 5px 0;line-height: 28px;">
                    <a>关闭</a>
                    <el-button type="success" size="mini">回复</el-button>
                  </div>
                </div>
              </el-col>
              <el-col :span="1" style="text-align: center;padding-top: 20px;">
                <el-button type="text" icon="el-icon-edit-outline" style="font-size:18px;"></el-button>
              </el-col>

            </el-row>
            <Divider></Divider>
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//攻略页面
import { articleServer } from "../../api/reference";
export default {
  name: "travelGuideIndex",
  data() {
    return {
      searchText: "",
      singData: {
        author_id: 8,
        author_name: "admin123",
        brief: null,
        class_tag: "abroad",
        content: "11",
        date: "2018-03-18T13:14:32.000Z",
        id: 11,
        praise: 0,
        state: 1,
        title: "323"
      },
      comment: [],
      taglist: [
        { key: "inbound", name: "国内游" },
        { key: "abroad", name: "出境游" },
        { key: "spot", name: "热门景点" },
        { key: "shopping", name: "购物圣地" },
        { key: "article", name: "旅游文摘" }
      ],
      breadData: [
        {
          label: "",
          route: { path: "/travel-reference" }
        },
        {
          label: "",
          route: { path: "/travel-reference/article" }
        },
        {
          label: "攻略详情"
        }
      ]
    };
  },

  mounted() {
    const { name } = this.$route;
    if (name === "referenceIndex") {
      this.breadData[0].label = "旅游攻略";
      this.breadData[0].route.path="/travel-reference";
    }

    if (name === "notesIndex") {
      this.breadData[0].label = "旅游游记";
      this.breadData[0].route.path="/travel-notes";
    }

    this.getReference();
  },
  computed: {
    lastTime() {
      return Math.floor(
        (Number(new Date()) - Number(new Date(this.singData.date))) / 8640000
      );
    },
    showTag() {
      const tar = this.taglist.find(
        item => this.singData.class_tag === item.key
      );
      const tag = tar ? tar.name : "未知分类";
      const bread = this.breadData[1];
      bread.label = tag;
      bread.route.query = { tag: tar.key };
      return tag;
    },
    textLen() {
      var intLength = 0;
      const { content } = this.singData;
      if (!!content) {
        for (let i = 0; i < content.length; i++) {
          if (content.charCodeAt(i) < 0 || content.charCodeAt(i) > 255) {
            intLength = intLength + 2;
          } else {
            intLength = intLength + 1;
          }
        }
      }
      return intLength;
    }
  },

  methods: {
    getReference() {
      const { id } = this.$route.params;
      articleServer("get", {
        params: {
          artId: id
        }
      }).then(
        suc => {
          const { code, message, data } = suc.data;
          if (code) {
            this.singData = data;
		console.log(this.singData);
          } else {
            this.$message({
              type: "error",
              message
            });
          }
        },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        }
      );
    },

    searchguide() {
      //搜索功能
      console.log("searchguide");
      this.$router.push({
        name: "searchguide",
        params: { text: this.searchtext }
      });
    },
    sendcomment() {
      sendcommentServer("post", {
        user: {
          username: this.passport_username,
          password: this.passport_password,
          newpassword: this.passport_newpassword
        }
      });
    }
  }
};
</script>
<style lang="less">

</style>
